import React, {Component} from 'react';
import {NavLink, Link} from "react-router-dom";
import widthUseNavigate from "../../router/widthUseNavigate.js"
import "./index.css";
import axios from 'axios'
import RouteView from "../../router/routerViews.jsx";
import {Menu, Card} from 'antd';
import {MailOutlined,} from '@ant-design/icons';
import routeList from "../../router/index.js"
import {setName} from "../../store/userReducer.js"
import {store} from "../../store"

export class Page1 extends React.Component {
    state = {
        date: new Date(),
    }

    static getDerivedStateFromProps () {
        return null
    }

    getData = () => {
        axios.get('/test/data').then(res => {
            console.log('--->res', res.data)
        })
    }

    componentDidMount () {
        this.timeId = setInterval(() => {
            this.tick()
        }, 1000)
    }

    componentWillUnmount () {
        clearInterval(this.timeId)
    }

    tick = () => {
        this.setState({date: new Date()})
    }

    render () {
        return (
            <div>
                <p> 时间：<span>{this.state.date.toLocaleString()}</span></p>
                <p> 我是页面1</p>
                <button onClick={this.getData}>请求数据</button>
            </div>

        )
    }
}

export function NoMatch () {
    let {pathname} = window.location
    return (
        <div>
            <h3>404</h3>
            <p>当前地址找不到：{pathname}</p>
            <NavLink to="/">首页</NavLink>
        </div>
    )
}

function getItem ({label, path, children, type, icon}) {
    return {
        path,
        key: path,
        children,
        label,
        type,
        icon
    };
}

class Index extends Component {
    state = {
        items: routeList,
        current: '/map',
        list: routeList,

    }
    //无子级菜单
    renderMenu = ({label, key}) => {
        if (!label) return ''
        return (
            <Menu.Item key={key} icon={<MailOutlined/>} onClick={() => {
                this.handleClick({key: key})
            }}>
                <Link to={key}>{label}</Link>
            </Menu.Item>)
    }
    //子菜单级菜单
    renderSubMenu = ({label, path, children}) => {
        return (
            <Menu.ItemGroup key={path} icon={<MailOutlined/>} title={label}
            >
                {
                    children && children.map(tVal => {
                        return tVal.children && tVal.children.length > 0 ? this.renderSubMenu(tVal) : this.renderMenu(tVal)
                    })
                }
            </Menu.ItemGroup>)
    }
    handleClick = (e) => {
        let key = e.key
        this.setState({current: key})
        this.props.to(key)
        if (key === '/hooks') {
            store.dispatch(setName('李四'))
        }
    }
    openChange = (e) => {
        let key;
        if (e.length === 1) {
            key = e[0]
            this.setState({current: key})
            this.props.to(key)
        } else if (e.length > 1) {
            key = e[e.length - 1]
            this.setState({current: key})
            this.props.to(key)
        }
    }

    componentDidMount () {
        try {
            //根据url路径匹配菜单激活项
            let {pathname} = window.location
            this.setState({current: pathname})
        } catch {
            this.setState({current: '/map'})
            this.props.to('/map')
        }

    }

    render () {
        let {items, list, current} = this.state
        return (
            <div className="home">
                {/*<h1 className="br">React</h1>*/}
                <div className="main">
                    <div className="left">
                        {/*<Menu*/}
                        {/*    mode="inline"*/}
                        {/*    theme="dark"*/}
                        {/*    defaultSelectedKeys={['/map']}*/}
                        {/*    onClick={this.handleClick}*/}
                        {/*>*/}
                        {/*    {*/}
                        {/*        items && items.map(fVal => {*/}
                        {/*            return fVal.children && fVal.children.length > 0 ? this.renderSubMenu(fVal) : this.renderMenu(fVal)*/}
                        {/*        })*/}
                        {/*    }*/}
                        {/*</Menu>*/}

                        <Menu
                            style={{height: "100%"}}
                            mode="inline"
                            theme="dark"
                            selectedKeys={current}
                            onClick={this.handleClick}
                            onOpenChange={this.openChange}
                            items={list}
                        />
                    </div>
                    <div className="right">
                        <Card style={{width: '100%', height: '100%'}}>
                            <RouteView route={items}/>
                        </Card>
                    </div>
                </div>
            </div>
        );
    }
}

export default widthUseNavigate(Index);
// export default myWithRouter(Index);

